<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>public</title>
    <!--Import materialize.css-->
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css"> -->
  <!-- <link rel="stylesheet" href="src/assets/css/element.css"> -->
  <link rel="stylesheet" href="src/assets/css/font-awesome.min.css">
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"> -->
    <style type="text/css">
    body {
    	background-color:#eeeeee;
    	/*background:url(src/assets/bg.jpg) repeat-x;*/
    	margin:0px;
    	overflow:hidden;
    }
    </style>
  </head>
  <body style="margin:0px" onLoad="init()">
    <script type="text/javascript" src="src/assets/js/ThreeCanvas.js"></script>
    <script type="text/javascript" src="src/assets/js/Snow.js"></script>
    <script type="text/javascript">
    var SCREEN_WIDTH = window.innerWidth;
    var SCREEN_HEIGHT = window.innerHeight;

    var container;

    var particle;

    var camera;
    var scene;
    var renderer;

    var mouseX = 0;
    var mouseY = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    var particles = [];
    var particleImage = new Image();//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
    particleImage.src = 'src/assets/ParticleSmoke.png';



    function init() {

    	container = document.getElementById("canvle");

    	camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
    	camera.position.z = 1000;

    	scene = new THREE.Scene();
    	scene.add(camera);

    	renderer = new THREE.CanvasRenderer();
    	renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    	var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );

    	for (var i = 0; i < 500; i++) {

    		particle = new Particle3D( material);
    		particle.position.x = Math.random() * 2000 - 1000;
    		particle.position.y = Math.random() * 2000 - 1000;
    		particle.position.z = Math.random() * 2000 - 1000;
    		particle.scale.x = particle.scale.y =  1;
    		scene.add( particle );

    		particles.push(particle);
    	}

    	container.appendChild( renderer.domElement );


    	document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    	document.addEventListener( 'touchstart', onDocumentTouchStart, false );
    	document.addEventListener( 'touchmove', onDocumentTouchMove, false );

    	setInterval( loop, 3000 / 60 );

    }

    function onDocumentMouseMove( event ) {

    	mouseX = event.clientX - windowHalfX;
    	mouseY = event.clientY - windowHalfY;
    }

    function onDocumentTouchStart( event ) {

    	if ( event.touches.length == 1 ) {

    		event.preventDefault();

    		mouseX = event.touches[ 0 ].pageX - windowHalfX;
    		mouseY = event.touches[ 0 ].pageY - windowHalfY;
    	}
    }

    function onDocumentTouchMove( event ) {

    	if ( event.touches.length == 1 ) {

    		event.preventDefault();

    		mouseX = event.touches[ 0 ].pageX - windowHalfX;
    		mouseY = event.touches[ 0 ].pageY - windowHalfY;
    	}
    }

    //

    function loop() {

    for(var i = 0; i<particles.length; i++)
    	{

    		var particle = particles[i];
    		particle.updatePhysics();

    		with(particle.position)
    		{
    			if(y<-1000) y+=2000;
    			if(x>1000) x-=2000;
    			else if(x<-1000) x+=2000;
    			if(z>1000) z-=2000;
    			else if(z<-1000) z+=2000;
    		}
    	}

    	camera.position.x += ( mouseX - camera.position.x ) * 0.05;
    	camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
    	camera.lookAt(scene.position);

    	renderer.render( scene, camera );


    }
    </script>
    <div id="canvle" style="position: fixed;z-index: -1;"></div>
    <div id="app">
      <navbar></navbar>
      <router-view></router-view>
    </div>
    <script src="dist/build.js"></script>
    <!-- <script src="src/assets/js/fontawesome.js"></script> -->
  </body>
</html>
